<!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
  ~ Copyright (c) 2017 Contributors to the Eclipse Foundation
  ~
  ~ See the NOTICE file(s) distributed with this work for additional
  ~ information regarding copyright ownership.
  ~
  ~ This program and the accompanying materials are made available under the
  ~ terms of the Eclipse Public License 2.0 which is available at
  ~ http://www.eclipse.org/legal/epl-2.0, or the Apache Software License 2.0
  ~ which is available at https://www.apache.org/licenses/LICENSE-2.0.
  ~
  ~ SPDX-License-Identifier: EPL-2.0 OR Apache-2.0
  ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
<div *ngIf="!loading">
    <winery-table
        [data]="apiData.propertyMappings"
        [columns]="columns"
        (cellSelected)="onCellSelected($event)"
        (removeBtnClicked)="onRemoveClick($event)"
        (addBtnClicked)="onAddClick();"
        [enableEditButton]="true"
        (editBtnClicked)="onEditClick()">
    </winery-table>
</div>

<winery-modal bsModal #addPropertyMappingModal="bs-modal" [modalRef]="addPropertyMappingModal">
    <winery-modal-header [title]="addOrUpdate + ' Property Mapping'">
    </winery-modal-header>
    <winery-modal-body>
        <form #propertyMappingForm="ngForm" id="propertyMappingForm" enctype="multipart/form-data">
            <fieldset>
                <div class="form-group">
                    <span>Service Template Property</span>
                    <br>
                    <div>
                        <label for="serviceTemplatePropertyRef">Property Name</label>
                        <input #serviceTemplateProp="ngModel"
                               name="serviceTemplatePropertyRef"
                               id="serviceTemplatePropertyRef"
                               class="form-control"
                               type="text"
                               required
                               [(ngModel)]="currentSelectedItem.serviceTemplatePropertyRef"/>
                    </div>

                    <div style="clear:both"
                         *ngIf="serviceTemplateProp.errors && (serviceTemplateProp.dirty || serviceTemplateProp.touched)"
                         class="alert alert-danger">
                        <div [hidden]="!serviceTemplateProp.errors.required">
                            Property name is required!
                        </div>
                    </div>
                </div>

                <div class="form-group">
                    <span>Target Type</span>
                    <br>
                    <input type="radio" name="typeSelect" id="NodeTemplate" value="nodeTemplates"
                           [checked]="serviceTemplateTemplate === templatesEnum.NodeTemplate"
                           (change)="radioBtnSelected($event)">
                    <label for="NodeTemplate">Node Template</label>
                    <input type="radio" name="typeSelect" id="RelationshipTemplate"
                           value="relationshipTemplates"
                           [checked]="serviceTemplateTemplate === templatesEnum.RelationshipTemplate"
                           (change)="radioBtnSelected($event)">
                    <label for="RelationshipTemplate">Relationship Template</label>
                    <input type="radio" name="typeSelect" id="RequirementTemplate"
                           value="requirementTemplates"
                           [checked]="serviceTemplateTemplate === templatesEnum.RequirementTemplate"
                           (change)="radioBtnSelected($event)">
                    <label for="RequirementTemplate">Requirement Template</label>
                    <input type="radio" name="typeSelect" id="CapabilityTemplate"
                           value="capabilityTemplates"
                           [checked]="serviceTemplateTemplate === templatesEnum.CapabilityTemplate"
                           (change)="radioBtnSelected($event)">
                    <label for="CapabilityTemplate">Capability Template</label>
                </div>

                <div class="form-group" *ngIf="targetTypeSelected">
                    <span>Target Element</span>
                    <br>
                    <div *ngIf="serviceTemplateTemplate === templatesEnum.NodeTemplate || serviceTemplateTemplate === templatesEnum.RelationshipTemplate;
                         else editTargetObject">
                        <ng-select #tempList
                                   [items]="templateList"
                                   [active]="[currentSelectedItem.targetObjectRef]"
                                   (selected)="targetObjectSelected($event)"
                                   placeholder="no template selected">
                        </ng-select>
                    </div>
                    <ng-template #editTargetObject>
                        <div>
                            <input #targetObj="ngModel"
                                   name="targetObjectRef"
                                   id="targetObjectRef"
                                   class="form-control"
                                   type="text"
                                   required
                                   [(ngModel)]="currentSelectedItem.targetObjectRef">
                        </div>
                        <div style="clear:both" *ngIf="targetObj.errors && (targetObj.dirty || targetObj.touched)"
                             class="alert alert-danger">
                            <div [hidden]="!targetObj.errors.required">
                                Name of target is required!
                            </div>
                        </div>
                    </ng-template>
                </div>

                <div class="form-group" *ngIf="targetObject">
                    <span>Target Property</span>
                    <div *ngIf="serviceTemplateTemplate === templatesEnum.NodeTemplate || serviceTemplateTemplate === templatesEnum.RelationshipTemplate;
                     else editTargetProps">
                        <ng-select *ngIf="targetProperties !== null"
                                   #propertiesSelect
                                   [items]="targetProperties"
                                   [active]="[selectedProperty]"
                                   (data)="targetPropertySelected($event)"
                                   placeholder="Please select a property">
                        </ng-select>
                    </div>
                    <ng-template #editTargetProps>
                        <input #targetProp="ngModel"
                               name="targetPropertyRef"
                               id="targetPropertyRef"
                               class="form-control"
                               type="text"
                               required
                               [(ngModel)]="currentSelectedItem.targetPropertyRef">
                        <div style="clear:both" *ngIf="targetProp.errors && (targetProp.dirty || targetProp.touched)"
                             class="alert alert-danger">
                            <div [hidden]="!targetProp.errors.required">
                                Name of target property is required!
                            </div>
                        </div>
                    </ng-template>
                </div>
            </fieldset>
        </form>
    </winery-modal-body>
    <winery-modal-footer
        (onOk)="addPropertyMapping()"
        [okButtonLabel]="addOrUpdate"
        [disableOkButton]="!(propertyMappingForm?.form.valid && currentSelectedItem.targetObjectRef && currentSelectedItem.targetObjectRef.length > 0
                           && currentSelectedItem.targetPropertyRef && currentSelectedItem.targetPropertyRef.length > 0)">
    </winery-modal-footer>
</winery-modal>

<winery-modal bsModal #confirmDeleteModal="bs-modal" [modalRef]="confirmDeleteModal">
    <winery-modal-header [title]="'Delete Property'">
    </winery-modal-header>
    <winery-modal-body>
        <p *ngIf="currentSelectedItem != null">
            Do you want to delete the Element
            <span style="font-weight:bold;">
                  {{ currentSelectedItem.serviceTemplatePropertyRef }}
              </span>
            ?
        </p>
    </winery-modal-body>
    <winery-modal-footer
        (onOk)="removeConfirmed();"
        [okButtonLabel]="'Yes'">
    </winery-modal-footer>
</winery-modal>

<winery-modal bsModal #browseForServiceTemplatePropertyDiag="bs-modal"
              [modalRef]="browseForServiceTemplatePropertyDiag">
    <winery-modal-header [title]="'Choose Property of Service Template'">
    </winery-modal-header>
    <winery-modal-body>
        <p class="text-info">Please click on a node to select the element</p>
        <div id='propertymappingstree'></div>
        <form>
            <fieldset>
                <div class="form-group">
                    <label for="newServiceTemplatePropertyRef">Reference to the property of the Service Template</label>
                    <input type="text" id="newServiceTemplatePropertyRef" class="form-control"/>
                </div>
            </fieldset>
        </form>
    </winery-modal-body>
    <winery-modal-footer
        (onOk)="removeConfirmed();"
        [closeButtonLabel]="'No'"
        [okButtonLabel]="'Yes'">
    </winery-modal-footer>
</winery-modal>
